{extend name="template/base" /}
{block name='style'}
<style>
    .card{
        width:100px;float:left;border-radius: 10px;position:relative;
    }
    .card img{
        cursor:pointer;
    }

    .card{
        font-size:14px;
        text-align:center;
        color:#f00;
    }
    .uploadify-button{
           background-color: transparent;
           background-size:120px 120px;
           border:0px;
           border-radius:12px;
           background-position:-10px -10px;
   }
   .uploadify:hover .uploadify-button {
       background-color: transparent;
       background-position:-10px -10px;
   }
   .uploadify object{
       left:0px;
   }
   .uploadbtn{
       /*display:none;*/
   } 
   .appendimg{
        border-radius:10px;
        overflow: hidden;
   }
   .appendimg img{
        width:100px;
        height:100px;
   }
   .del{
        width:100px;
        height:25px;
        background: #ccc;
        opacity: 0.5;
        text-align:center;
        line-height:25px;
        font-size:20px;
        font-weight:bold;
        color:#f00;
        cursor:pointer;
        display: none;
   }
</style>
{/block}
{block name="content"}
<div class="page-container">
    <form class="form form-horizontal" id="form" method="post" action="{:\\think\\Request::instance()->baseUrl()}">
        <input type="hidden" name="id" value="{$val.id ?? ''}">
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>所属：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                {if condition="isset($val.style) && $val.style eq 1"}
                    <div class="radio-box">
                        <input type="radio"  name="style" id="style-0" value="0">
                        <label for="style-0">材料商</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" name="style" id="style-1" value="1" checked>
                        <label for="style-1">租赁商</label>
                    </div>
                    
                {else/}
                  <div class="radio-box">
                      <input type="radio" checked name="style" id="style-0" value="0">
                      <label for="style-0">材料商</label>
                  </div>
                  <div class="radio-box">
                      <input type="radio" name="style" id="style-1" value="1">
                      <label for="style-1">租赁商</label>
                  </div>
                {/if}
                
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>所属分类：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <span class="select-box">
                  <select class="select" size="1" name="mater_class_id">
                    {volist name='list' id='vo'}
                      {if condition="isset($val.mater_class_id) && $val.mater_class_id eq $vo.id"}
                      <option value="{$vo.id}" selected>{$vo.name}</option>
                      {else/}
                      <option value="{$vo.id}">{$vo.name}</option>
                      {/if}
                    {/volist}
                  </select>
                </span>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>公司名称：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" placeholder="公司名称" name="name" value="{$val['name'] ?? ''}"  datatype="*" nullmsg="不能为空">
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>图片：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <div class='card'>
                     {if condition="isset($val.img) and !empty($val.img)"}
                          <div class='appendimg' id='appendimg'>
                                 <img src='/uploads/mater/{$val.img}' layer-src='/uploads/mater/{$val.img}'>  
                          </div>
                          <div class='del' data-imgpath='/uploads/mater/{$val.img}'>
                                 <i class='Hui-iconfont'>&#xe609;</i>
                          </div>
                          
                         <input type="hidden" name='img' value="{$val.img}" datatype="*" nullmsg="请上传图片">
                         <div class='uploadbtn' style='display: none;'>
                             <input type = "file" name = "url" id = "file" />
                         </div>
                     {else/}
                         <div class='uploadbtn'>
                             <input type = "file" name = "url" id = "file"/>
                         </div>
                         <!-- <input type="hidden" name='img' value="" datatype="*" nullmsg="请上传图片"> -->
                     {/if}
                </div>
            </div>
            <div class="col-xs-3 col-sm-3 img_exist"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>详情：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <textarea class='textarea radius' name="content" id="" datatype="*" nullmsg="不能为空">{$val.content ?? ''}</textarea>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script>
    $(function () {
        // $("[name='style'][value='{$vo.style ?? '0'}']").prop("checked", true);
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $('button[type=submit]').click(function(){
             if(0==$('input[name=img]').length){
                html="<span class='Validform_checktip Validform_wrong'>请上传图片</span>";
                $('.img_exist').html(html);
                return false;
             }else{
                $('.img_exist').html('');
             }
        });
        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret){
                ajax_progress(ret);
            }
        });
        $('#file').uploadify({
            'buttonImage' : '__LIB__/uploadify/btn.png',
            'swf':'__LIB__/uploadify/uploadify.swf',       
            'uploader':"{:url('upload',['folder'=>'mater'])}",  
            'width':100,
            'height':100,
            'fileTypeExts':'*.jpg;*.png',
            'multi':true,
            'removeCompleted':true,
            //把你的选择放在这里
            'onUploadSuccess' : function(file, data, response) {
                //追加到前面
                $('.card .uploadbtn').hide();
                $('.card').append(data);
            },
            'onFallback' : function() {
                alert('此站需要浏览器支持flash,否则上传头像功能将不可用');
                // layer_open('网站提示','<div style=\'font-size:20px;color:#f00\'><span>此站需要浏览器支持flash,否则上传头像功能将不可用</span></div>',{'w':'100%','h':'100%','type':1});
               /*  
                layer.open({
                  title: '在线调试'
                  ,content: '可以填写任意的layer代码'
                });
                */
                $('.card').remove();
            }
        });
        $('body').delegate('.appendimg','mouseover',function(){
            $(this).next().show();
        });
        $('body').delegate('.card', 'mouseleave', function() {
            $('.del').hide();
        });
        $('body').delegate('.del','click',function(){
            obj=$(this);
            imgpath=obj.data('imgpath');
            $.post("{:url('del_upload_img')}",{'imgpath':imgpath},function(r){
              if(r==1){
                obj.prev().remove();
                obj.next().remove();
                obj.remove();
                $('#file-queue').html('');
                $('.card .uploadbtn').show();
              }else{
                layer.msg('删除失败，请稍后再试');
              } 
            });
        }) 

        $('input[name=style]').click(function(){
            style=$(this).val()
            select=$('.select');
            $.post('{:url(\'get_mater_class\')}',{'style':style},function(r){
                  select.html(r);
            })
        });


    })
    layer.photos({
          photos: '#appendimg'
          ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        }); 
</script>
{/block}
